<template>
  <div>
    <MessageArea
      title="评论列表"
      :subTitle="`(${data.total})`"
      :list="data.rows"
      :isListLoading="isLoding"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
import MessageArea from "@/components/MessageArea";
import fetchData from "@/mixins/fatchData";
import { getComments, postComment } from "@/api/blog";
export default {
  data() {
    return {
      page: 1,
      limit: 10,
    };
  },
  mixins: [fetchData({})],
  components: {
    MessageArea,
  },
  computed: {
    /**
     *  用于判断还有没有数据 
     *  rows 为数据
     *  total 为数据总量 
     */
    hasMove() {
      return this.data.rows.length < this.data.total;
    },
  },
  created() {
    // 事件监听 监听滚动条滚动事件
    this.$bus.$on("mainscroll",this.handlHeight)
  },
  methods: {
    // 获取数据
    async fetchData() {
      return await getComments(this.$route.params.id, this.page, this.limit);
    },
    // 加载下一页
    async fetchMove() {
      if (!this.hasMove) {
        // 表示后面没有数据了 则不执行
        return;
      }
      this.isLoding = true; // 开启loading组件
      this.page++; // 页码加1
      const resp = await this.fetchData(); //数据赋值
      this.data.total = resp.total;
      this.data.rows = this.data.rows.concat(resp.rows); //将数据连接起来成为新的数组
      this.isLoding = false;
    },
    // 滚动条距离底部位置的事件
    handlHeight(dom){
      /**
       * range 到达底部的临界点
       * (dom.scrollTop + dom.clientHeight)-dom.scrollHeight 滚动条到底部的条件
       */
      if(this.isLoding || !dom){
        return //表示正在加载中
      }
      const range = 100; // 定义一个临界值
      const dec = Math.abs((dom.scrollTop + dom.clientHeight)-dom.scrollHeight);
      if(dec < range){ // 表示到达了底部
        this.fetchMove();
      }
    },
    // 子组件抛出的事件
    async handleSubmit(formData, callback) {
      const res = await postComment({
        blogId: this.$route.params.id,
        ...formData,
      });
      this.data.rows.unshift(res);
      this.data.total++;
      callback("评论成功");
    },
  },
};
</script>

<style lang="less" scoped>
</style>